﻿<!DOCTYPE html >
<html>

	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
		<link rel="stylesheet" href="dahuiji.css" />
	</head>
	<script type="text/javascript">
		
		window.onload = function(){
			var _options = document.getElementsByClassName("options")[0];
			//利用事件委托，设置兼容
			function cmp(){
				if(window.VBArray){
					_options.attachEvent("onclick",function(e){
						var e = e || event;
						var li = e.target || e.srcElement;
						
						gameEngine.frequency = Number(li.getAttribute("val")); 
						gameEngine.start();
						this.remove();
					},true)
				}else{
					_options.addEventListener("click",function(e){
						var e = e || event;
						var li = e.target || e.srcElement;
						if(li.tagName == "LI"){
							gameEngine.frequency = Number(li.getAttribute("val"));
							console.log(gameEngine.frequency)
							gameEngine.start();
							this.remove();
						}
					},true)
				}
			}
			cmp();
			
		}
	</script>
	<body>
		<div id="body_main" class="main">
			<ul class="options">
				<li val="100">比较简单</li>
				<li val="300">相对简单</li>
				<li val="500">相对困难</li>
				<li val="1000">超级困难</li>
			</ul>
		</div>
		<script type="text/javascript">
			/*=============================================游戏引擎========================================*/
			var gameEngine = {
				start : function(){
					gameEngine._logo();
					gameEngine.loading();
				},
				bg : {
					body : document.getElementById("body_main"),
					move : function(){
							setInterval(function(){
							style = this.body.currentStyle || window.getComputedStyle(this.body,null);
							this.body.style.backgroundPositionY = parseInt(style.backgroundPositionY) + 3 + "px";
						}.bind(this),30);
					},
					left : function(){
						return this.body.offsetLeft;
					},
					top : function(){
						return this.body.offsetTop;
					},
					height : function(){
						return this.body.offsetHeight;
					},
					width : function(){
						return this.body.offsetWidth;
					}
				},
				_logo : function(){
					this.lg = document.createElement("div");
					this.lg.className = "logo";
					document.body.appendChild(this.lg);
					
				},
				loading : function(){
					this.lg1 = document.createElement("div");
					this.lg1.className = "loading";
					document.body.appendChild(this.lg1);
					var index = 1;
					var t = setInterval(function(){
						index++;
						this.lg1.style.background = "url(img/loading"+(index%3+1)+".png)";
						if(index >= 9){
							clearInterval(t);
							this.lg1.remove();
							this.lg.remove();
							this.bg.move();
							myPlant.init();
							this.fire();
							this.autoCreatEnermy();
						}
					}.bind(this),500)
				},
				fire : function(){
					setInterval(function(){
						new Buttet().init();
						
					},this.frequency)
				},
				autoCreatEnermy : function(){
					setInterval(function(){
						this.createSmallEnermy();
						this.createMiddleEnermy();
						this.createLargeEnermy();
					}.bind(this),2000)
					
				},
				createSmallEnermy : function(){
					var num = Math.random();
					if(num>0.6){
						new Enermy(Enermy.TYPE_SMALL).init();
					}
				},
				createMiddleEnermy : function(){
					var num = Math.random();
					if(num>0.8){
						new Enermy(Enermy.TYPE_MIDDLE).init();
					}
				},
				createLargeEnermy : function(){
					var num = Math.random();
					if(num>0.95){
						new Enermy(Enermy.TYPE_LARGE).init();
					}
				},
				enermy : {}
				
			}
			/*=============================================我的飞机========================================*/
			var myPlant = {
				init : function(){
					this.body = document.createElement("div");
					this.body.className = "my-warplain";
					document.body.appendChild(this.body);
					this.body.style.left = gameEngine.bg.left() + (gameEngine.bg.width() - this.body.offsetWidth)/2 + "px";
					this.body.style.top = gameEngine.bg.top() + gameEngine.bg.height() - this.body.offsetHeight + "px";
					this.move();
				},
				height : function(){
					return this.body.offsetHeight;
				},
				width : function(){
					return this.body.offsetWidth;
				},
				top : function(){
					return this.body.offsetTop;
				},
				left : function(){
					return this.body.offsetLeft;
				},
				move : function(){
					document.onmousemove = function(e){
						var e = e || event;
						var [mousex,mousey] = [e.clientX - this.width()/2,e.clientY - this.height()/2];
						this.body.style.left = Math.min(Math.max(gameEngine.bg.left(),mousex),gameEngine.bg.left()+gameEngine.bg.width()-this.width())+"px"
						this.body.style.top = Math.min(Math.max(gameEngine.bg.top(),mousey),gameEngine.bg.height()+gameEngine.bg.top()-this.height()) + "px";
					}.bind(this)
				},
				
				
			}
			/*==============================================子弹=======================================*/
			var Buttet = function(){
				this.init = function(){
					this.body = document.createElement("div");
					this.body.className = "bullet";
					this.body.style.left = myPlant.left() + myPlant.width()/2 + "px";
					document.body.appendChild(this.body);
					this.body.style.top = myPlant.top() - this.height()  + "px";
					this.move();
				};
				this.height = function(){
					return this.body.offsetHeight;	
				},
				this.width = function(){
					return this.body.offsetWidth;	
				},
				this.top = function(){
					return this.body.offsetTop;	
				},
				this.left = function(){
					return this.body.offsetLeft;	
				},
				this.move = function(){
					var t = setInterval(function(){
						this.body.style.top = this.body.offsetTop - 8 + "px";
						if(this.top() <= -this.height()){
							this.destory();
							clearInterval(t);
						};
						//移动一步做碰撞检测
						//飞机受伤
						//子弹爆炸
						for(var i in gameEngine.enermy){
							var _position = {
								y:this.body.offsetTop,
								x:this.body.offsetLeft
							}
							var _left = gameEngine.enermy[i].left() - this.body.offsetWidth;
							var _right = gameEngine.enermy[i].left() + gameEngine.enermy[i].width();
							var _top = gameEngine.enermy[i].top();
							var _bottom = gameEngine.enermy[i].top() + gameEngine.enermy[i].height();
							if(_position.x>_left&&_position.x<_right&&_position.y>_top&&_position.y<_bottom){
								this.explode();
								gameEngine.enermy[i].hurt();
								clearInterval(t);
							}
						}
					}.bind(this),50)
				}
				this.explode = function(){
					console.log("a")
					this.body.className = "bullet_die";
					var index = 0;
					var t = setInterval(function(){
						index++;
						if(index==3){
							this.destory();
							clearInterval(t);
							return;
						}
						this.body.style.background = "url(img/die"+index+".png)";
					}.bind(this),60)
				}
				this.destory = function(){
					this.body.remove();
				}
			}
			
			/*=============================================敌人的飞机========================================*/
			var Enermy =function(type){
				
				this.init = function(){
					this.body = document.createElement("div");
					switch(type){
						case Enermy.TYPE_SMALL : {
							this.body.className = "enemy-small";
							this.hp = 1;
							this.speed = 10;
							break;
						}
						case Enermy.TYPE_MIDDLE : {
							this.body.className = "enemy-middle";
							this.hp = 3;
							this.speed = 6;
							break;
						}
						case Enermy.TYPE_LARGE : {
							this.body.className = "enemy-large";
							this.hp = 6;
							this.speed = 3;
							break;
						}
						
					};
					document.body.appendChild(this.body);
					this.index = Math.round(Math.random()*100000000 )+ new Date().getTime().toString();
					gameEngine.enermy[this.index] = this;
					//gameEngine.enermy = JSON.parse(gameEngine.enermy)
					console.log(gameEngine.enermy)
					//[gameEngine.bg.left(),gameEngine.bg.left()+gameEngine.bg.width()]
					var _left = Math.min(Math.max(gameEngine.bg.left() + Math.random()*gameEngine.bg.width() ),gameEngine.bg.left()+gameEngine.bg.width()-this.body.offsetWidth);
					var _top = -this.body.offsetHeight ;
					this.body.style.left = _left + "px";
					this.body.style.top = _top + "px";
					this.move();
				},
				this.height = function(){
					return this.body.offsetHeight;
				},
				this.width = function(){
					return this.body.offsetWidth;
				},
				this.top = function(){
					return this.body.offsetTop;
				},
				this.left = function(){
					return this.body.offsetLeft;
				},
				this.move = function(){
					var t = setInterval(function(){
						this.body.style.top = this.body.offsetTop + this.speed + "px";
						if(this.body.offsetTop > gameEngine.bg.height()){
							clearInterval(t);
							this.destory();
						}
					}.bind(this),100)
				},
				this.hurt = function(){
					--this.hp==0?this.destory():"";
				},
				this.destory = function(){
					this.body.remove();
					delete gameEngine.enermy[this.index]
				}
			}
			Enermy.TYPE_SMALL = 1;
			Enermy.TYPE_MIDDLE = 2;
			Enermy.TYPE_LARGE = 3;
		</script>
	</body>